<template>
  <div class="wallet font-semibold" v-if="props.walletShow">
    <van-overlay :show="props.walletShow" :lock-scroll="false">
      <div
        class="bg-[#1a2c38] overflow-y-auto max-h-[500px] md:max-h-auto m-auto text-white rounded-lg shadow-lg max-w-[500px] w-full"
      >
        <div
          v-if="main.user.rechargStatus"
          class="flex justify-between items-center p-4"
        >
          <div class="flex items-center">
            <!-- <van-icon name="card" /> -->
            <svg
              width="22"
              height="22"
              viewBox="0 0 48 48"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M4 10C4 8.89543 4.89543 8 6 8H42C43.1046 8 44 8.89543 44 10V38C44 39.1046 43.1046 40 42 40H6C4.89543 40 4 39.1046 4 38V10Z"
                fill="none"
                stroke="#fff"
                stroke-width="4"
                stroke-linejoin="round"
              />
              <path
                d="M4 16H44"
                stroke="#fff"
                stroke-width="4"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M27 32H36"
                stroke="#fff"
                stroke-width="4"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M44 10V26"
                stroke="#fff"
                stroke-width="4"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M4 10V26"
                stroke="#fff"
                stroke-width="4"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
            <span class="ml-2"> {{ title }} </span>
          </div>
          <button class="text-gray-400 hover:text-gray-200">
            <!-- <van-icon
              @click="closeWallet"
              class="cursor-pointer"
              name="cross"
            /> -->
            <svg
              class="cursor-pointer"
              @click="closeWallet"
              width="32"
              height="32"
              viewBox="0 0 48 48"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M14 14L34 34"
                stroke="#b1bad3"
                stroke-width="4"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M14 34L34 14"
                stroke="#b1bad3"
                stroke-width="4"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </button>
        </div>
        <div v-if="showTab" class="sidebar mb-2 m-auto rounded text-sm">
          <button
            @click="
              activeTab = 'tab1';
              layerStep = '1-2';
              cleardata();
            "
            :class="{
              'active-tab': activeTab === 'tab1',
              '': activeTab !== 'tab1'
            }"
            class="btn bg-[#071824] w-full px-1 py-2 text-white rounded-none"
          >
            {{ $t("layer.wallet.recharge") }}
          </button>
          <button
            @click="
              activeTab = 'tab2';
              layerStep = '2-1';
              cleardata();
              getBankcardList();
            "
            :class="{
              'active-tab': activeTab === 'tab2',
              '': activeTab !== 'tab2'
            }"
            class="btn bg-[#071824] w-full px-1 py-2 text-white"
          >
            {{ $t("layer.wallet.wallet") }}
          </button>
          <button
            @click="
              activeTab = 'tab3';
              layerStep = '3-1';
              cleardata();
            "
            :class="{
              'active-tab': activeTab === 'tab3',
              '': activeTab !== 'tab3'
            }"
            class="btn bg-[#071824] w-full px-1 py-2 text-white"
          >
            {{ $t("layer.wallet.bankAccount") }}
          </button>
        </div>

        <!-- 充值 -->
        <div class="recharge" v-if="activeTab === 'tab1'">
          <!-- 1-1 -->
          <div
            v-if="layerStep == '1-1'"
            class="flex items-center justify-center"
          >
            <div
              class="bg-[#1a2c38] text-white rounded-lg shadow-lg max-w-[500px] w-full"
            >
              <div
                v-if="!main.user.rechargStatus"
                class="flex justify-between items-center p-4"
              >
                <div class="flex items-center">
                  <van-icon name="card" />
                  <span class="ml-2"> {{ $t("layer.wallet.wallet") }} </span>
                </div>
                <button class="text-gray-400 hover:text-gray-200">
                  <van-icon
                    @click="closeWallet"
                    class="cursor-pointer"
                    name="cross"
                  />
                </button>
              </div>
              <div class="flex justify-center mb-4">
                <img
                  class="w-full"
                  height="220"
                  alt=""
                  src="../../assets/wallet.png"
                />
              </div>
              <div class="text-left mb-4 px-4">
                <p class="text-lg font-bold mb-2">
                  {{ $t("layer.wallet.empty") }}
                </p>
                <p class="text-sm text-[#b1bad3] font-thin">
                  {{ $t("layer.wallet.buyText") }}
                </p>
              </div>
              <div class="flex justify-between mb-4 px-4">
                <button
                  @click="layerStep = '1-2'"
                  class="bg-[#1475e1] hover:bg-[#105eb4] text-sm w-full text-white py-2 px-4 rounded"
                >
                  {{ $t("layer.wallet.recharge") }}
                </button>
              </div>
            </div>
          </div>
          <!-- 1-2 -->
          <div
            v-else-if="layerStep == '1-2'"
            class="flex items-center justify-center"
          >
            <div
              class="bg-[#1a2c38] text-white rounded-lg shadow-lg max-w-[500px] w-full"
            >
              <div class="flex justify-between items-center p-4">
                <!-- <div
                  @click="layerStep = '1-1'"
                  class="flex cursor-pointer items-center text-blue-400 hover:text-blue-200"
                >
                  <span class="ml-2">
                    &lt; {{ $t("layer.wallet.wallet") }} /
                    {{ $t("layer.wallet.recharge") }}
                  </span>
                </div> -->
              </div>
              <div class="px-4 text-sm">{{ $t("layer.wallet.plzchose") }}</div>
              <div class="p-4">
                <van-collapse
                  v-model="collapse"
                  :border="false"
                  class="bg-[#213743]"
                  v-if="layerConfig"
                >
                  <van-collapse-item
                    v-for="(item, i) in layerConfig.deposit_online_channel_list"
                    :name="i"
                  >
                    <template #title>
                      <div v-if="item.showText.length">
                        {{ item.channel_name + " ——— " + item.showText }}
                      </div>
                      <div v-else>
                        {{ item.channel_name }}
                      </div>
                    </template>
                    <div
                      v-for="item2 in item.scene_list"
                      class="collapse-item"
                      @click="
                        layerStep = '1-3-1';
                        choseType(item, item2);
                      "
                    >
                      <p>{{ item2.scene_name }} &nbsp;&nbsp;&nbsp;&nbsp;</p>
                      <p>
                        {{ $t("layer.wallet.Amountrange") }}:{{
                          item2.once_min_limit
                        }}-{{ item2.once_max_limit }} , scene_code:{{
                          item2.scene_code
                        }}。
                      </p>
                    </div>
                  </van-collapse-item>
                  <!-- 线下充值 -->
                  <van-collapse-item
                    :name="5"
                    v-show="layerConfig?.deposit_offline_bank_list?.length"
                  >
                    <template #title>
                      <div
                        v-if="
                          layerConfig?.deposit_offline_bank_reward?.showText
                            .length
                        "
                      >
                        {{ $t("layer.wallet.OfflineRecharge") }} ———
                        {{ layerConfig.deposit_offline_bank_reward.showText }}
                      </div>
                      <div v-else>
                        {{ $t("layer.wallet.OfflineRecharge") }}
                      </div>
                    </template>
                    <div
                      v-for="item in layerConfig.deposit_offline_bank_list"
                      class="collapse-item"
                      @click="
                        layerStep = '1-3-1';
                        choseOfflineBank(item);
                      "
                    >
                      <p>{{ item.bank_name }}({{ item.branch_name }})</p>
                      <p>
                        {{ $t("layer.wallet.Amountrange") }}:{{
                          item.once_min_limit
                        }}-{{ item.once_max_limit }}
                      </p>
                    </div>
                  </van-collapse-item>
                  <!-- <van-collapse-item title="数字钱包" name="2">
                      <div class="collapse-item" @click="layerStep = '1-3-2'">
                        <p>USDT 【TRC-20】</p>
                        <p>
                          金额范围:10USDT-10万USDT，转账会自动生成小数点金额，请按生成金额转张
                        </p>
                      </div>
                      <div class="collapse-item cursor-not-allowed">
                        <p>USDT 【ERC-20】</p>
                        <p>
                          金额范围:10USDT-10万USDT，转账会自动生成小数点金额，请按生成金额转张
                        </p>
                      </div>
                    </van-collapse-item> -->
                </van-collapse>
              </div>
            </div>
          </div>
          <!-- 1-3-1 -->
          <div
            v-else-if="layerStep == '1-3-1'"
            class="flex items-center justify-center"
          >
            <div
              class="bg-[#1a2c38] text-white rounded-lg shadow-lg max-w-[500px] w-full"
            >
              <div class="flex justify-between items-center p-4">
                <div
                  @click="layerStep = '1-2'"
                  class="flex cursor-pointer items-center text-blue-400 hover:text-blue-200"
                >
                  <span class="ml-2"> &lt; </span>
                </div>
                <p class="text-blue-400">{{ $t("layer.wallet.recharge") }}</p>
                <p></p>
              </div>
              <div class="p-4 pt-0">
                <van-collapse
                  v-if="sceneObj.child_item && sceneObj.child_item.length != 0"
                  :border="false"
                  v-model="showCollapse"
                  class="bg-[#213743]"
                >
                  <van-collapse-item
                    :title="channelObj.channel_name"
                    :value="sceneObj.scene_name"
                    name="1"
                  >
                    <div class="collapse-item">
                      <el-radio-group v-model="item_code">
                        <el-radio
                          :value="item.bank_code"
                          v-for="item in sceneObj.child_item"
                          size="large"
                          border
                          >{{ item.bank_abbr }}</el-radio
                        >
                      </el-radio-group>
                    </div>
                  </van-collapse-item>
                </van-collapse>
                <div
                  v-else
                  class="flex justify-between p-4 rounded bg-[#213743] text-sm"
                >
                  <span>{{ channelObj.channel_name }}</span>
                  <span>{{ sceneObj.scene_name }}</span>
                </div>
              </div>
              <div class="p-4 pt-0 text-black">
                <div class="p-4 rounded bg-[#213743]">
                  <div
                    class="text-center mb-6 text-white flex items-center input-style"
                  >
                    <!-- <input
                      v-model="amount"
                      type="text"
                      class="w-full py-2 px-4 rounded bg-[#0f212e] text-white"
                      :placeholder="$t('layer.wallet.plzenteramount')"
                    /> -->
                    <van-field
                      @update:model-value="amountChange"
                      :formatter="formatter"
                      type="text"
                      class="input-field w-full py-2 px-4 rounded bg-[#0f212e] text-white"
                      v-model="amount"
                    />
                    <div class="w-16 text-center">≈</div>
                    <van-field
                      :border="false"
                      type="text"
                      readonly
                      class="input-field py-2 px-4 rounded bg-[#0f212e] text-white"
                      v-model="multiplier"
                    >
                      <template #extra>
                        <p>{{ $t("layer.register.gold") }}</p>
                      </template>
                    </van-field>
                  </div>
                  <div
                    class="grid grid-cols-2 sm:grid-cols-3 md:grid.-cols-3 gap-4 mb-6"
                  >
                    <div
                      v-for="item in layerConfig.deposit_amount_list"
                      @click="setAmount(Number(item))"
                      class="bg-[#2f4553] text-white hover:bg-[#557086] text-center py-2 rounded cursor-pointer"
                    >
                      {{ Number(item) }}
                    </div>
                  </div>
                  <div class="text-left text-white mb-2">
                    <p>
                      {{ $t("layer.wallet.Currentbalance") }}:
                      {{ main2.balance }}
                      <span class="text-yellow-600">{{
                        $t("layer.register.gold")
                      }}</span>
                    </p>
                  </div>
                  <div class="text-center mb-6">
                    <button
                      :class="{
                        'bg-gray-300 hover:bg-gray-300':
                          !amount ||
                          (sceneObj.child_item &&
                            sceneObj.child_item?.length != 0 &&
                            item_code == null),
                        'bg-[#1475e1] hover:bg-[#105eb4]': amount
                      }"
                      :disabled="!amount"
                      class="text-white text-sm py-2 w-full rounded"
                      @click="subOnlineRecharge()"
                    >
                      {{ $t("layer.wallet.nextstep") }}
                    </button>
                  </div>
                  <!-- 在线客服 -->
                  <!-- <div class="text-center text-white text-sm">
                    <p>
                      {{ $t("layer.wallet.Forquestions")
                      }}<a href="#" class="text-blue-500">{{
                        $t("layer.wallet.OnlineCustomer")
                      }}</a>
                    </p>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
          <!-- 1-3-2 -->
          <div
            v-else-if="layerStep == '1-3-2'"
            class="flex items-center justify-center"
          >
            <div class="">
              <div class="flex justify-between items-center p-4">
                <div
                  @click="layerStep = '1-2'"
                  class="flex cursor-pointer items-center text-blue-400 hover:text-blue-200"
                >
                  <span class="ml-2"> &lt; </span>
                </div>
                <p class="text-blue-400">充值</p>
                <p></p>
              </div>
              <div class="p-4 pt-0">
                <van-collapse
                  :border="false"
                  v-model="showCollapse"
                  class="bg-[#213743]"
                >
                  <van-collapse-item
                    title="数字钱包"
                    value="USDT【TRC-20】"
                    name="1"
                  >
                    <div class="collapse-item">
                      <p>当前汇率:1USDT 【TRC-20】= USDT 【TRC-20】7.29元</p>
                    </div>
                  </van-collapse-item>
                </van-collapse>
              </div>
              <div class="p-4 pt-0 text-black">
                <div class="p-4 rounded bg-[#213743]">
                  <div
                    class="text-center mb-6 flex justify-between items-center font-thin text-white"
                  >
                    存入金额(USDT【TRC-20】)
                    <input
                      v-model="amount"
                      type="text"
                      class="py-2 px-4 rounded bg-[#0f212e] text-white"
                      placeholder="请输入货币数量"
                    />
                  </div>
                  <div
                    class="flex justify-between items-center text-white font-thin text-sm mb-2"
                  >
                    <div class="flex items-center font-thin">
                      <span>当前汇率:</span>
                      <input
                        type="text"
                        class="w-auto p-2 rounded bg-[#0f212e] text-white"
                      />
                    </div>
                    <div class="flex items-center font-thin">
                      <span>≈GOLD:</span>
                      <input
                        type="text"
                        class="w-auto p-2 rounded bg-[#0f212e] text-white"
                      />
                    </div>
                  </div>
                  <div
                    class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-3 gap-4 mb-6"
                  >
                    <div
                      @click="setAmount(100)"
                      class="bg-[#2f4553] text-white hover:bg-[#557086] text-center py-2 rounded cursor-pointer"
                    >
                      100
                    </div>
                    <div
                      @click="setAmount(200)"
                      class="bg-[#2f4553] text-white hover:bg-[#557086] text-center py-2 rounded cursor-pointer"
                    >
                      200
                    </div>
                    <div
                      @click="setAmount(500)"
                      class="bg-[#2f4553] text-white hover:bg-[#557086] text-center py-2 rounded cursor-pointer"
                    >
                      500
                    </div>
                    <div
                      @click="setAmount(1000)"
                      class="bg-[#2f4553] text-white hover:bg-[#557086] text-center py-2 rounded cursor-pointer"
                    >
                      1000
                    </div>
                    <div
                      @click="setAmount(2000)"
                      class="bg-[#2f4553] text-white hover:bg-[#557086] text-center py-2 rounded cursor-pointer"
                    >
                      2000
                    </div>
                    <div
                      @click="setAmount(3000)"
                      class="bg-[#2f4553] text-white hover:bg-[#557086] text-center py-2 rounded cursor-pointer"
                    >
                      3000
                    </div>
                  </div>
                  <div class="text-left text-white mb-2">
                    <p>
                      当前余额: 200.15
                      <span class="text-yellow-600">GOLD</span>
                    </p>
                  </div>
                  <div class="text-left text-sm text-white mb-2">
                    <p>如何快速建立货币账户?</p>
                  </div>
                  <div
                    class="bg-[#f6f6f6] cursor-pointer mb-4 hover:bg-[#c0bfbf] text-sm py-2 rounded text-center w-full"
                  >
                    点击下载 XX app
                  </div>
                  <div class="text-center mb-6">
                    <button
                      :class="{
                        'bg-gray-300': !amount,
                        'bg-[#1475e1] hover:bg-[#105eb4]': amount
                      }"
                      :disabled="!amount"
                      class="text-white text-sm py-2 w-full rounded"
                      @click="nextStep('1-3-2-1')"
                    >
                      创建订单
                    </button>
                  </div>
                  <div class="text-center text-white text-sm">
                    <p>
                      如有问题，请联系<a href="#" class="text-blue-500"
                        >在线客服</a
                      >
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 1-3-2-1 -->
          <div
            v-else-if="layerStep == '1-3-2-1'"
            class="flex items-center justify-center"
          >
            <div
              class="bg-[#1a2c38] text-white rounded-lg shadow-lg max-w-[500px] w-full"
            >
              <div class="flex justify-between items-center p-4">
                <div
                  @click="layerStep = '1-3-2'"
                  class="flex cursor-pointer items-center text-blue-400 hover:text-blue-200"
                >
                  <span class="ml-2"> &lt; </span>
                </div>
                <p class="text-blue-400">充值</p>
                <p></p>
              </div>
              <div class="p-4 pt-0 font-thin">
                <div class="bg-[#213743] p-4 rounded text-sm">
                  <div class="flex justify-between items-center mb-2">
                    <p class="text-[#b1bad3]">USDT【TRC-20】存入金额</p>
                    <p class="text-white font-semibold">{{ amount }}</p>
                  </div>
                  <p class="text-red-500 font-semibold">
                    提示:须严格按照实际金额+小数点金额转账，否则无法正常到账
                  </p>
                </div>
              </div>
              <div class="p-4">
                <div
                  class="bg-[#0f212e] p-4 rounded text-sm border-2 border-dashed border-[#b1bad3]"
                >
                  <p class="mb-4">充值地址</p>
                  <div class="flex justify-between items-center">
                    <input
                      value="TCW1HNICESJGKYVW4LVSS5SRQZ7IKRW4y"
                      readonly
                      class="w-full p-2 rounded bg-[#2f4553] text-[#b1bad3]"
                      type="text"
                    />
                    <div
                      class="m-auto text-center ml-2 px-8 py-2 bg-[#2f4553] hover:bg-[#557086] rounded cursor-pointer"
                    >
                      {{ $t("layer.wallet.copy") }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 1-3-3 -->
          <div
            v-else-if="layerStep == '1-3-3'"
            class="flex items-center justify-center"
          >
            <div
              class="bg-[#1a2c38] text-white rounded-lg shadow-lg max-w-[500px] w-full"
            >
              <div class="flex justify-between items-center p-4">
                <div
                  @click="layerStep = '1-2'"
                  class="flex cursor-pointer items-center text-blue-400 hover:text-blue-200"
                >
                  <span class="ml-2"> &lt; </span>
                </div>
                <p class="text-blue-400">
                  {{ $t("layer.wallet.BankInformation") }}
                </p>
                <p></p>
              </div>
              <div class="p-4 pt-0">
                <div
                  class="flex justify-between rounded-t p-4 bg-[#213743] text-sm"
                >
                  <span>{{ $t("layer.wallet.payee") }}</span>
                  <span>{{ offlineBankInfo.holder_name }}</span>
                </div>
                <div class="flex justify-between p-4 bg-[#213743] text-sm">
                  <span>{{ $t("layer.wallet.cardnumber") }}</span>
                  <span
                    >{{ offlineBankInfo.bank_card_number }}
                    <span
                      v-copy="offlineBankInfo.bank_card_number"
                      class="m-auto text-center ml-2 px-2 py-2 bg-[#2f4553] hover:bg-[#557086] rounded cursor-pointer"
                    >
                      {{ $t("layer.wallet.copy") }}
                    </span>
                  </span>
                </div>
                <div class="flex justify-between p-4 bg-[#213743] text-sm">
                  <span>{{ $t("layer.wallet.Bankcode") }}</span>
                  <span
                    >{{ offlineBankInfo.bank_code }}
                    <span
                      v-copy="offlineBankInfo.bank_code"
                      class="m-auto text-center ml-2 px-2 py-2 bg-[#2f4553] hover:bg-[#557086] rounded cursor-pointer"
                    >
                      {{ $t("layer.wallet.copy") }}
                    </span>
                  </span>
                </div>
                <div
                  class="flex justify-between rounded-b p-4 bg-[#213743] text-sm"
                >
                  <span>{{ $t("layer.wallet.BankAddress") }}</span>
                  <span
                    >{{ offlineBankInfo.address }}({{
                      offlineBankInfo.branch_name
                    }})</span
                  >
                </div>
              </div>
              <div class="p-4 pt-0 text-black">
                <div class="p-4 rounded bg-[#213743]">
                  <div class="text-center mb-6">
                    <button
                      class="text-white text-sm py-2 w-full cursor-pointer rounded bg-[#1475e1] hover:bg-[#105eb4]"
                      @click="
                        nextStep('1-3-3-1');
                        bank_card_id = offlineBankInfo.bank_card_id;
                      "
                    >
                      {{ $t("layer.wallet.nextstep") }}
                    </button>
                  </div>
                  <!-- 在线客服
                  <div class="text-center text-white text-sm">
                    <p>
                      {{ $t("layer.wallet.Forquestions")
                      }}<a href="#" class="text-blue-500">
                        {{ $t("layer.wallet.OnlineCustomer") }}</a
                      >
                    </p>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
          <!-- 1-3-3-1 -->
          <div
            v-else-if="layerStep == '1-3-3-1'"
            class="flex items-center justify-center"
          >
            <div
              class="bg-[#1a2c38] text-white rounded-lg shadow-lg max-w-[500px] w-full"
            >
              <div class="flex justify-between items-center p-4">
                <div
                  @click="layerStep = '1-3-3'"
                  class="flex cursor-pointer items-center text-blue-400 hover:text-blue-200"
                >
                  <span class="ml-2"> &lt; </span>
                </div>
                <p class="text-blue-400">
                  {{ $t("layer.wallet.Uploadpayment") }}
                </p>
                <p></p>
              </div>
              <div class="p-4 pt-0 font-thin">
                <div class="bg-[#213743] p-4 rounded text-sm">
                  <div class="text-left mb-6">
                    {{ $t("layer.wallet.amounts") }}:
                    <input
                      v-model="amount"
                      maxlength="9"
                      type="text"
                      class="w-full py-2 px-4 rounded bg-[#0f212e] text-white my-2"
                      :placeholder="$t('layer.wallet.plzenteramount')"
                    />
                    {{ $t("layer.wallet.remark") }}:
                    <input
                      v-model="remark"
                      type="text"
                      class="w-full py-2 px-4 rounded bg-[#0f212e] text-white my-2"
                      :placeholder="$t('layer.wallet.plzenterremark')"
                    />
                    {{ $t("layer.wallet.upload") }}:
                    <van-uploader
                      class="w-[80px] h-[80px] my-2"
                      style="display: block !important"
                      v-model="fileList"
                      :max-count="1"
                    >
                      <template #preview-cover="{ file }">
                        <div class="preview-cover van-ellipsis">
                          {{ file.name }}
                        </div>
                      </template>
                      <div
                        class="w-[80px] h-[80px] flex items-center justify-center bg-[#0f212e] rounded border-2 border-[#2f4553] hover:border-[#557086]"
                      >
                        <van-icon name="plus" />
                      </div>
                    </van-uploader>
                    <div v-if="layerConfig.deposit_active_status == 1">
                      <p>active:</p>
                      <el-radio-group
                        class="my-2"
                        v-model="is_participate_active"
                      >
                        <el-radio value="1" size="large" border>参加</el-radio>
                        <el-radio value="0" size="large" border
                          >不参加</el-radio
                        >
                      </el-radio-group>
                    </div>
                  </div>
                </div>
              </div>
              <div class="p-4 pt-0 text-black">
                <div class="p-4 rounded bg-[#213743]">
                  <div class="text-center">
                    <button
                      class="text-white text-sm py-2 w-full cursor-pointer rounded bg-[#1475e1] hover:bg-[#105eb4]"
                      @click="subOfflineRecharge()"
                    >
                      {{ $t("layer.wallet.nextstep") }}
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 提现 -->
        <div v-if="activeTab === 'tab2'">
          <div v-if="layerStep === '2-1'">
            <div class="text-center mb-2">
              <div
                class="m-auto text-center justify-center items-center flex p-4 rounded-lg"
              >
                <span class="text-2xl font-bold">{{ main2.balance }}</span>
                <!-- <van-icon name="gold-coin" class="text-yellow-500 ml-2" /> -->
                <img
                  src="../../assets/checkin/jb.png"
                  class="ml-2 w-[32px]"
                  alt=""
                />
              </div>
            </div>
            <form @submit.prevent="withdrawSubmit" class="px-4 pb-4">
              <div class="mb-4">
                <label
                  class="block text-sm font-medium mb-1 flex justify-between"
                >
                  <div>
                    {{ $t("layer.wallet.amounts") }}
                    <span class="text-red-500">*</span>
                  </div>
                  <span
                    @click="nextStep('0-2')"
                    class="text-[#1475e1] cursor-pointer"
                    >{{ $t("layer.wallet.Withdrawalwalletmanagement") }}</span
                  >
                </label>
                <div class="flex items-center input-style">
                  <van-field
                    :border="false"
                    :formatter="max50000"
                    @update:model-value="withdrawAmountChange"
                    format-trigger="onBlur"
                    type="text"
                    class="input-field w-full py-2 px-4 rounded bg-[#0f212e] text-white"
                    v-model="withdrawAmount"
                  />
                  <div class="w-16 text-center">≈</div>
                  <van-field
                    :border="false"
                    type="text"
                    readonly
                    class="input-field py-2 px-4 rounded bg-[#0f212e] text-white"
                    v-model="divisor"
                  >
                    <template #extra>
                      <p>{{ layerConfig?.currency_info?.currency_type }}</p>
                    </template>
                  </van-field>
                  <button
                    type="button"
                    @click="maxWA"
                    class="bg-gray-700 text-sm md:text-base p-2 rounded-r w-[100px]"
                  >
                    {{ $t("layer.wallet.max") }}
                  </button>
                </div>
              </div>
              <div class="mb-4">
                <label
                  class="block text-sm font-medium mb-1 flex justify-between"
                >
                  <div>
                    {{ $t("layer.wallet.Selectwithdrawalmethod") }}
                    <span class="text-red-500">*</span>
                  </div>
                  <span class="">{{ $t("layer.wallet.bankcard") }}</span>
                </label>
                <div class="flex items-center">
                  <el-select v-model="withdrawalMethod">
                    <el-option
                      v-for="item in bankAccountList"
                      :key="item.bank_card_id"
                      :label="
                        item.provider_name +
                        ': ' +
                        item.bank_name +
                        '(' +
                        item.bank_card_number +
                        ')'
                      "
                      :value="item.bank_card_id"
                    ></el-option>
                  </el-select>
                </div>
              </div>
              <div class="my-4 text-sm font-thin text-[#b1bad3]">
                <p>
                  {{ $t("layer.wallet.lowerlimit") }}:
                  {{ layerConfig.withdrawal_policy?.once_min_limit }}
                </p>
                <p>
                  {{ $t("layer.wallet.withdrawallimit") }}:
                  {{ layerConfig.withdrawal_policy?.once_max_limit }}
                </p>
                <p>
                  {{ $t("layer.wallet.freewithdrawals") }}:
                  {{ layerConfig.withdrawal_policy?.remaining_free_count }}
                </p>
                <p>
                  {{ $t("layer.wallet.RemainingTimes") }}:
                  {{
                    layerConfig.withdrawal_policy?.withdraw_day_count == 0
                      ? $t("layer.wallet.nolimit")
                      : layerConfig.withdrawal_policy?.withdraw_day_count
                  }}
                </p>
              </div>
              <div
                @click="withdrawValid"
                class="bg-[#1475e1] hover:bg-[#105eb4] mt-4 p-2 rounded-lg w-full text-center cursor-pointer"
              >
                {{ $t("layer.wallet.Withdraw") }}
              </div>
            </form>
          </div>
          <div v-if="layerStep === '2-1-1'">
            <div class="p-4 text-sm">
              <table
                class="w-full border-collapse border border-[#2f4553] mt-4 text-white text-center"
              >
                <tr class="">
                  <td class="border border-[#2f4553] p-2">
                    {{ $t("layer.wallet.table1") }}
                  </td>
                  <td class="border border-[#2f4553] p-2 text-green-500">
                    {{ previewData.amount }} {{ main.currency }}
                  </td>
                </tr>
                <tr class="">
                  <td class="border border-[#2f4553] p-2">
                    {{ $t("layer.wallet.table2") }}
                  </td>
                  <td class="border border-[#2f4553] p-2 text-green-500">
                    {{ previewData.not_audited_amount }} {{ main.currency }}
                  </td>
                </tr>
                <tr class="">
                  <td class="border border-[#2f4553] p-2">
                    {{ $t("layer.wallet.table3") }}
                  </td>
                  <td class="border border-[#2f4553] p-2 text-green-500">
                    {{ previewData.exempt_audited_amount }} {{ main.currency }}
                  </td>
                </tr>
                <tr class="">
                  <td class="border border-[#2f4553] p-2">
                    {{ $t("layer.wallet.table4") }}({{
                      previewData.bank_fee.rate
                    }}%)
                  </td>
                  <td class="border border-[#2f4553] p-2 text-green-500">
                    {{ previewData.bank_fee.amount }} {{ main.currency }}
                  </td>
                </tr>
                <tr class="">
                  <td class="border border-[#2f4553] p-2">
                    {{ $t("layer.wallet.table5") }}({{
                      previewData.admin_fee.rate
                    }}%)
                  </td>
                  <td class="border border-[#2f4553] p-2 text-green-500">
                    {{ previewData.admin_fee.amount }} {{ main.currency }}
                  </td>
                </tr>
                <tr class="">
                  <td class="border border-[#2f4553] p-2">
                    {{ $t("layer.wallet.table6") }}
                  </td>
                  <td class="border border-[#2f4553] p-2 text-green-500">
                    {{ previewData.paid_amount }} {{ main.currency }}
                  </td>
                </tr>
              </table>
              <div class="flex justify-center mt-4">
                <button
                  @click="
                    layerStep = '2-1';
                    title = globalProperties.$t('layer.wallet.wallet');
                    showTab = true;
                  "
                  class="bg-[#1fff20] hover:bg-[#99ce99] text-black text-sm px-8 mr-4 py-2 rounded"
                >
                  {{ $t("layer.wallet.cancel") }}
                </button>
                <button
                  @click="withdrawVerify"
                  class="bg-[#1475e1] hover:bg-[#105eb4] text-sm px-8 text-white py-2 rounded"
                >
                  {{ $t("layer.wallet.validate") }}
                </button>
              </div>
            </div>
          </div>
          <div v-if="layerStep === '2-2'">
            <!-- <div class="sidebar m-auto flex justify-center mb-4">
              <button
                :class="[
                  'btn bg-[#071824] w-full px-1 py-2 text-white rounded-none',
                  forgetTab === 'login' ? 'bg-[#2f4553]' : 'bg-[#071824]'
                ]"
                @click="forgetTab = 'login'"
              >
                Login password
              </button>
              <button
                :class="[
                  'btn bg-[#071824] w-full px-1 py-2 text-white rounded-none',
                  forgetTab === 'email' ? 'bg-[#2f4553]' : 'bg-[#071824]'
                ]"
                @click="forgetTab = 'email'"
              >
                Email authentication
              </button>
            </div> -->
            <div v-if="forgetTab === 'login'" class="p-4 pt-0">
              <div class="mb-4">
                <label for="login-password" class="block mb-2">
                  {{
                    validType === "0-1"
                      ? $t("layer.wallet.Loginpassword") + "*"
                      : $t("layer.wallet.Paypassword") + "*"
                  }}
                </label>
                <input
                  type="password"
                  v-model="loginPsw"
                  id="login-password"
                  class="w-full p-2 bg-gray-800 border border-gray-600 rounded"
                />
                <p
                  v-if="validType !== '0-1'"
                  class="text-sm pt-2 ml-auto text-right"
                >
                  {{ $t("layer.wallet.Forgotpassword") }}
                  <span
                    @click="nextStep('0-1')"
                    class="underline cursor-pointer text-[#1475e1]"
                    >{{ $t("layer.wallet.Clickhere") }}
                  </span>
                </p>
              </div>
              <div class="flex justify-center">
                <button
                  class="bg-[#1475e1] hover:bg-[#105eb4] w-full text-white text-sm py-2 rounded"
                  @click="getticket()"
                >
                  {{ $t("layer.wallet.nextstep") }}
                </button>
              </div>
            </div>
            <div v-else class="p-4 pt-0">
              <div class="mb-6">
                <label for="email" class="block mb-2">Email *</label>
                <input
                  type="email"
                  id="email"
                  class="w-full p-2 bg-gray-800 border border-gray-600 rounded"
                />
              </div>
              <div class="mb-6">
                <label for="verification-code" class="block mb-2"
                  >Verification code *</label
                >
                <div class="flex justify-between">
                  <input
                    type="text"
                    id="verification-code"
                    class="w-full p-2 bg-gray-800 border border-gray-600 rounded mr-2"
                    placeholder="Enter verification code"
                  />
                  <button class="bg-blue-500 text-white w-60 px-4 py-2 rounded">
                    Verification code
                  </button>
                </div>
              </div>
              <p class="text-xs text-[#b1bad3] font-thin mb-6">
                If your mobile phone number or email address is not bound, you
                will not be able to change the password, you can bind the
                operation or contact online customer service.
              </p>
              <div class="flex justify-between">
                <!-- <button class="bg-red-500 text-white px-6 py-2 rounded">
                    Cancel
                  </button> -->
                <button
                  class="bg-[#1475e1] hover:bg-[#105eb4] w-full text-white text-sm py-2 rounded"
                  @click="nextStep('2-2-1')"
                >
                  {{ $T("layer.wallet.nextstep") }}
                </button>
              </div>
            </div>
          </div>
          <div v-if="layerStep === '2-2-1'">
            <div class="mb-4 px-4">
              <label for="withdrawal-password" class="block mb-2"
                >{{ $t("layer.wallet.Withdrawalpassword") }} *</label
              >
              <div class="flex space-x-2">
                <input
                  ref="passwordInputs"
                  v-for="(input, index) in 4"
                  :key="index"
                  type="password"
                  maxlength="1"
                  class="w-1/4 p-2 bg-gray-800 border border-gray-600 rounded"
                  @keydown="handleKeyDown(index, $event)"
                  v-model="inputValues[index]"
                />
              </div>
            </div>
            <div class="px-4">
              <label for="confirm-withdrawal-password" class="block mb-2"
                >{{ $t("layer.wallet.Withdrawalpassword") }} *</label
              >
              <div class="flex space-x-2">
                <!-- <input
                    type="password"
                    maxlength="1"
                    id="confirm-withdrawal-password"
                    class="w-1/4 p-2 bg-gray-800 border border-gray-600 rounded"
                  /> -->
                <input
                  ref="conPasswordInputs"
                  v-for="(input, index) in 4"
                  :key="'conPassword-' + index"
                  type="password"
                  maxlength="1"
                  class="w-1/4 p-2 bg-gray-800 border border-gray-600 rounded"
                  @keydown="handleKeyDown2(index, $event)"
                  v-model="conInputValues[index]"
                />
              </div>
            </div>
            <div class="p-4 flex justify-center">
              <button
                class="bg-[#1475e1] hover:bg-[#105eb4] w-full text-white text-sm py-2 rounded"
                @click="editPsw"
              >
                {{ $t("layer.wallet.confirm") }}
              </button>
            </div>
          </div>
        </div>
        <!-- 银行卡 -->
        <div v-if="activeTab === 'tab3'">
          <div v-if="layerStep === '3-1'">
            <div class="p-4">
              <div
                v-if="layerConfig.bank_list?.length == 0"
                class="flex flex-col items-center"
              >
                <van-icon class="w-48" size="12rem" name="card" />
                <p class="text-lg">No bound bank account</p>
              </div>
              <div
                v-else
                @click="unbandCard(item)"
                class="p-4 w-70 rounded mb-2 cursor-pointer bg-[#2f4553] hover:bg-[#557086]"
                v-for="(item, i) in bankAccountList"
                :key="i"
              >
                {{ item.provider_name }} {{ item.bank_name }}(
                {{ item.bank_card_number }} )
              </div>
            </div>
            <div class="bg-[#0f212e] flex items-center">
              <div
                @click="nextStep('0-2')"
                class="bg-[#1475e1] hover:bg-[#105eb4] cursor-pointer m-auto my-4 px-8 py-2 rounded text-sm text-white"
              >
                {{ $t("layer.wallet.Addbankcard") }}
              </div>
            </div>
          </div>

          <div v-if="layerStep === '3-2'">
            <form @submit.prevent="vaildAddBank" class="p-4">
              <!-- <div class="mb-4">
                <label class="block text-white mb-2">Withdrawal password</label>
                <div class="flex space-x-2">
                  <input
                    ref="passwordInputs"
                    v-for="(input, index) in 4"
                    :key="index"
                    type="password"
                    maxlength="1"
                    class="w-1/4 p-2 bg-gray-800 border border-gray-600 rounded"
                    @keydown="handleKeyDown(index, $event)"
                  />
                </div>
                <div class="text-right mt-2">
                  <p href="#" class="text-sm">
                    Forgot your password?
                    <span
                      @click="nextStep('2-2')"
                      class="underline text-blue-400 cursor-pointer"
                      >Click here.</span
                    >
                  </p>
                </div>
              </div> -->
              <div class="mb-4">
                <label class="block text-white mb-2">{{
                  $t("layer.wallet.accountname")
                }}</label>
                <input
                  type="text"
                  v-model="bankForm.accountName"
                  class="w-full p-2 border border-gray-400 rounded"
                  required
                />
              </div>
              <div class="mb-4">
                <label class="block text-white mb-2">{{
                  $t("layer.wallet.cardnumber")
                }}</label>
                <input
                  type="text"
                  v-model="bankForm.bankAccountNumber"
                  class="w-full p-2 border border-gray-400 rounded"
                  required
                />
              </div>
              <div class="mb-4">
                <label class="block text-white mb-2">{{
                  $t("layer.wallet.bankname")
                }}</label>
                <el-select v-model="bankForm.bankName">
                  <el-option
                    v-for="item in layerConfig.bank_list"
                    :key="item.bank_code"
                    :label="item.provider_name + '：' + item.bank_name"
                    :value="item.bank_code"
                  />
                </el-select>
              </div>
              <div class="mb-4">
                <label class="block text-white mb-2">
                  {{ $t("layer.wallet.bankOfName") }}
                </label>
                <input
                  type="text"
                  v-model="bankForm.accountOpeningBranch"
                  class="w-full p-2 border border-gray-400 rounded"
                />
              </div>
              <div class="flex justify-center">
                <button
                  type="submit"
                  class="bg-[#1475e1] hover:bg-[#105eb4] text-sm w-full text-white py-2 rounded"
                >
                  {{ $t("layer.wallet.validate") }}
                </button>
              </div>
            </form>
          </div>

          <div v-if="layerStep === '3-3'">
            <div class="p-4">
              <select
                class="input-field w-full py-2 px-4 rounded bg-[#0f212e] text-white"
                name=""
                id=""
              >
                <option>8898</option>
                <option>8899</option>
                <option>8900</option>
              </select>
              <p class="mt-4">Attention:</p>
              <div class="text-[#b1bad3] text-sm my-2">
                <p class="mb-2">
                  1.The withdrawal wallet can only bind up to 5 account.
                </p>
                <p class="mb-2">
                  2.The withdrawal wallet cannot be changed after it is bound.
                  If you need to make changes, please contact customer service.
                </p>
                <p class="mb-2">
                  3.Binding a bank account for the first time will lock the
                  account name and cannot be changed!
                </p>
              </div>
              <div
                @click="nextStep('3-2')"
                class="bg-[#1475e1] text-center hover:bg-[#105eb4] w-full text-white text-sm py-2 cursor-pointer rounded"
              >
                Bind wallet
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-overlay>
    <van-dialog
      @confirm="unbindCard()"
      v-model:show="dialog"
      z-index="1003"
      :title="dialogTitle"
      show-cancel-button
    >
      <p class="text-center">Unbind Or Not?</p>
    </van-dialog>
  </div>
</template>
<script setup name="wallet">
import {
  ref,
  onMounted,
  onBeforeUnmount,
  watch,
  computed,
  getCurrentInstance
} from "vue";
import { mainAct } from "@/store/activeda";
import { mainWallet } from "@/store/wallet";
import { storeToRefs } from "pinia"; //引入pinia转换,
import {
  paymentInit,
  getBalance,
  onlineDeposit,
  offlineDeposit,
  addBankcard,
  removeBankcard,
  bankcardList,
  withdrawSetPsw,
  withdrawPreview,
  withdrawPost
} from "../../api/wallet.js";
import { getTicket } from "../../api/user.js";
import { showConfirmDialog } from "vant";
import { getLastOffset } from "element-plus/es/components/message/src/instance.mjs";
// import { PluralizationRule } from "vue-i18n";
const main = mainAct();
const main2 = mainWallet();
const { showPhoneMenu } = storeToRefs(main); //响应式
const {
  appContext: {
    config: { globalProperties }
  }
} = getCurrentInstance();

const activeTab = ref("tab1");
/* 说明
layerStep = 1-1 未充值
layerStep = 1-2 钱包/充值
layerStep = 1-3-1 充值详情页 feibao
layerStep = 1-3-2 充值详情页 数字钱包
layerStep = 1-3-2-1 充值详情页 数字钱包创建订单

layerStep = 2-1 提现页
layerStep = 2-1-1 提现预览
layerStep = 2-2 忘记密码
layerStep = 2-2-1 确认密码

layerStep = 3-1 银行卡页
layerStep = 3-2 添加银行卡
layerStep = 3-3 已有银行卡用户添加卡

layerStep = 0-1 用户提现密码设置
layerStep = 0-2 用户银行卡新增
layerStep = 0-4 用户银行卡删除
layerStep = 0-3 用户提现预览
*/
const layerStep = ref("1-2");
const collapse = ref(["0", "1", "2"]);
const showCollapse = ref(["0", "1", "2"]);
const amount = ref("");
const setAmount = value => {
  amount.value = value;
  amountChange(value);
};

const title = ref(globalProperties.$t("layer.wallet.wallet"));
const showTab = ref(main.user.rechargStatus);
const withdrawAmount = ref("50.00");
const withdrawalMethod = ref("");
const withdrawPassword = ref("");
const showError = ref(false);
const forgetTab = ref("login");
const bankForm = ref({
  password1: "",
  password2: "",
  password3: "",
  password4: "",
  accountName: "",
  bankAccountNumber: "",
  bankName: "",
  accountOpeningBranch: ""
});
const cleardata = () => {
  withdrawAmount.value = "";
  withdrawPassword.value = "";
  amount.value = "";
  pswValue.value = "";
  conPswValue.value = "";
  loginPsw.value = "";
  withdrawalMethod.value = "";
  withdrawal_token.value = "";
  ticket.value = "";
  bankForm.value = {
    password1: "",
    password2: "",
    password3: "",
    password4: "",
    accountName: "",
    bankAccountNumber: "",
    bankName: "",
    accountOpeningBranch: ""
  };
};
const multiplier = ref("");
const divisor = ref("");
const dialog = ref(false);
const dialogTitle = ref("Title");

const withdrawAmountChange = v => {
  if (layerConfig.value.currency_info?.exchange_rate) {
    console.log(v);
    divisor.value = (
      Number(v) / Number(layerConfig.value.currency_info.exchange_rate)
    ).toFixed(2);
  }
  // console.log(divisor.value);
};

const formatter = v => {
  // 只能输入正整数时
  return v.replace(/\D/g, "");
};

const amountChange = v => {
  multiplier.value = Math.floor(
    Number(v) * Number(layerConfig.value.currency_info.exchange_rate)
  );
  // console.log(multiplier.value);
};
const maxWA = () => {
  if (
    Number(main2.balance) <
    Number(layerConfig.value.withdrawal_policy?.once_max_limit)
  ) {
    withdrawAmount.value = main2.balance;
  } else {
    withdrawAmount.value = layerConfig.value.withdrawal_policy?.once_max_limit;
  }
  withdrawAmountChange(main2.balance);
};
// 下一步
const nextStep = e => {
  console.log("eeeeeeee", e);
  switch (e) {
    case "1-3-2-1":
      if (!amount.value) {
        return;
      } else {
        layerStep.value = "1-3-2-1";
      }
      break;
    case "1-3-3":
      activeTab.value = "tab1";
      showTab.value = true;
      layerStep.value = "1-3-3";
      break;
    case "1-3-3-1":
      activeTab.value = "tab1";
      showTab.value = false;
      layerStep.value = "1-3-3-1";
      break;
    case "2-1-1":
      activeTab.value = "tab2";
      title.value = globalProperties.$t("layer.wallet.Withdraw");
      showTab.value = false;
      layerStep.value = "2-1-1";
      break;
    case "2-2":
      activeTab.value = "tab2";
      title.value = globalProperties.$t("layer.wallet.sWithdrawalpassword");
      showTab.value = false;
      layerStep.value = "2-2";
      // console.log("2-2");
      break;
    case "2-2-1":
      title.value = globalProperties.$t("layer.wallet.sWithdrawalpassword");
      layerStep.value = "2-2-1";
      break;
    case "3-2":
      title.value = globalProperties.$t("layer.wallet.Bindbankaccount");
      showTab.value = false;
      layerStep.value = "3-2";
      break;

    case "3-3":
      activeTab.value = "tab3";
      title.value = globalProperties.$t("layer.wallet.Withdrawalwallet");
      showTab.value = false;
      layerStep.value = "3-3";
      break;
    case "0-1":
      console.log("修改密码");
      activeTab.value = "tab2";
      validType.value = "0-1";
      title.value = globalProperties.$t("layer.wallet.VerifyPassword");
      showTab.value = false;
      layerStep.value = "2-2";
      break;
    case "0-2":
      console.log("银行卡新增");
      activeTab.value = "tab2";
      validType.value = "0-2";
      title.value = globalProperties.$t("layer.wallet.VerifyPassword");
      showTab.value = false;
      layerStep.value = "2-2";
      break;
    case "0-4":
      console.log("银行卡删除");
      activeTab.value = "tab2";
      validType.value = "0-4";
      title.value = globalProperties.$t("layer.wallet.VerifyPassword");
      showTab.value = false;
      layerStep.value = "2-2";

      break;
    case "0-3":
      console.log("用户提现");
      activeTab.value = "tab2";
      validType.value = "0-3";
      title.value = globalProperties.$t("layer.wallet.VerifyPassword");
      showTab.value = false;
      layerStep.value = "2-2";
      break;
    default:
      break;
  }
};

const validType = ref("");
const ticket = ref("");
//获取ticket
const getticket = async () => {
  let usage = "";
  let password_approval = loginPsw.value;
  let password_type = "";
  // ElNotification({
  //   position: "top-left",
  //   zIndex: 1004,
  //   title: "Success",
  //   message: "Verification passed",
  //   type: "success"
  // });
  console.log(validType.value);
  if (validType.value == "0-1") {
    usage = "user_pay_secret_set";
    password_type = "login";
  } else if (validType.value == "0-2") {
    usage = "user_bank_manage";
    password_type = "payment";
  } else if (validType.value == "0-3") {
    usage = "user_withdraw";
    password_type = "payment";
  } else if (validType.value == "0-4") {
    usage = "user_bank_manage";
    password_type = "payment";
  }
  let data = {
    usage,
    password_approval,
    password_type
  };
  let res = await getTicket(data);
  console.log(res);
  console.log(
    "validType.valuevalidType.valuevalidType.valuevalidType.value",
    validType.value
  );
  if (res.errno == 0) {
    ticket.value = res.data.ticket;
    if (validType.value == "0-1") {
      title.value = globalProperties.$t("layer.wallet.sWithdrawalpassword");
      layerStep.value = "2-2-1";
    } else if (validType.value == "0-2") {
      activeTab.value = "tab3";
      title.value = globalProperties.$t("layer.wallet.Bindbankaccount");
      showTab.value = true;
      layerStep.value = "3-2";
    } else if (validType.value == "0-3") {
      title.value = globalProperties.$t("layer.wallet.WithdrawalInformation");
      withdrawSubmit();
    } else if (validType.value == "0-4") {
      // console.log(0 - 4);
      let data = {
        bank_card_id: bank_card_id.value,
        ticket: ticket.value
      };
      // on confirm
      let res = await removeBankcard(data);
      // console.log(res);
      if (res.errno == 0) {
        cleardata();
        ElNotification({
          position: "top-left",
          zIndex: 1004,
          title: "Success",
          message: "unbind succeeded",
          type: "success"
        });
      }
      activeTab.value = "tab3";
      title.value = "Wallet";
      showTab.value = true;
      layerStep.value = "3-1";
      getBankcardList();
    }
  }
};
const vaildAddBank = async () => {
  if (
    !bankForm.value.accountName ||
    !bankForm.value.bankAccountNumber ||
    !bankForm.value.bankName
  ) {
    // ElNotification({
    //   position: "top-left",
    //   zIndex: 1004,
    //   title: "Error",
    //   message: "Please fill out all required fields.",
    //   type: "error"
    // });
    alert(globalProperties.$t("layer.wallet.required"));
    return false;
  }
  // let password = "";
  // passwordInputs.value.forEach(input => {
  //   password += input.value;
  // });
  let data = {
    // password,
    ticket: ticket.value,
    holder_name: bankForm.value.accountName,
    bank_card_number: bankForm.value.bankAccountNumber,
    bank_code: bankForm.value.bankName,
    branch_name: bankForm.value.accountOpeningBranch
  };
  let res = await addBankcard(data);
  if (res.errno == 0) {
    ElNotification({
      position: "top-left",
      zIndex: 1004,
      title: "Success",
      message: "Add card succeeded",
      type: "success"
    });
    showTab.value = true;
    layerStep.value = "3-1";
    // password = "";
    cleardata();
    getBankcardList();
  }
  // console.log(res);
};

const max50000 = value => {
  // 转换参数为数字类型
  let num = Number(value);
  // 检查是否为有效数字，如果不是，返回null或者你想要的默认值
  if (isNaN(num)) {
    return null; // 或者你可以选择return 1; 或者其他默认值
  }
  // 确保值在1到50000之间
  if (num < layerConfig.value.withdrawal_policy?.once_min_limit) {
    return layerConfig.value.withdrawal_policy?.once_min_limit;
  } else if (num > layerConfig.value.withdrawal_policy?.once_max_limit) {
    return layerConfig.value.withdrawal_policy?.once_max_limit;
  } else {
    return num;
  }
};
const loginPsw = ref("");
const editPsw = async () => {
  // 清空之前的密码值
  pswValue.value = "";
  conPswValue.value = "";

  // 通过 map 收集输入框的值
  pswValue.value = inputValues.value.join("");
  conPswValue.value = conInputValues.value.join("");
  console.log("pswValue.value", pswValue.value);
  console.log("conPswValue.value", conPswValue.value);

  if (pswValue.value.length < 4 || conPswValue.value.length < 4)
    return ElNotification({
      position: "top-left",
      zIndex: 1004,
      title: "Error",
      message: globalProperties.$t("layer.wallet.cannotLessThan"),
      type: "error"
    });

  if (pswValue.value != conPswValue.value)
    return ElNotification({
      position: "top-left",
      zIndex: 1004,
      title: "Error",
      message: globalProperties.$t("layer.wallet.inconsistent"),
      type: "error"
    });

  let data = {
    password: pswValue.value,
    password_confirm: conPswValue.value,
    ticket: ticket.value // 假设 ticket 已经定义
  };
  let res = await withdrawSetPsw(data);
  if (res.errno == 0) {
    ElNotification({
      position: "top-left",
      zIndex: 1004,
      title: "Success",
      message: "Set Password succeeded",
      type: "success"
    });
    showTab.value = true;
    layerStep.value = "2-1";
    //设置弹窗title
    title.value = globalProperties.$t("layer.wallet.wallet");
    main.user_detail.payment_password_set = 1;
    cleardata();
  }
  // console.log(res);
};
const passwordInputs = ref([]);
const inputValues = ref(Array(4).fill("")); // 存储每个输入框的值
const conPasswordInputs = ref([]);
const conInputValues = ref(Array(4).fill("")); // 存储确认密码的输入框值
const pswValue = ref("");
const conPswValue = ref("");

const handleKeyDown = (index, event) => {
  const input = event.target;
  console.log("passwordInputs", passwordInputs.value);
  const maxLength = parseInt(input.getAttribute("maxlength"));

  // 处理 Backspace 键
  if (event.key === "Backspace" && input.value === "") {
    if (index > 0) {
      inputValues.value[index - 1] = ""; // 清空前一个输入框
      pswValue.value =
        pswValue.value.slice(0, index - 1) + pswValue.value.slice(index); // 更新密码值
      passwordInputs.value[index - 1].focus();
    }
  }

  // 处理输入时限制长度
  if (input.value.length >= maxLength) {
    if (event.key !== "Backspace" && index < 3) {
      event.preventDefault(); // 阻止默认输入行为
      passwordInputs.value[index + 1].focus();
    }
  }

  // 实时更新密码值
  if (event.key !== "Backspace") {
    inputValues.value[index] = input.value; // 更新当前输入框值
    pswValue.value = inputValues.value.join(""); // 更新整体密码值
  }
};

const handleKeyDown2 = (index, event) => {
  const input = event.target;
  const maxLength = parseInt(input.getAttribute("maxlength"));

  // 处理 Backspace 键
  if (event.key === "Backspace" && input.value === "") {
    if (index > 0) {
      conInputValues.value[index - 1] = ""; // 清空前一个输入框
      conPswValue.value =
        conPswValue.value.slice(0, index - 1) + conPswValue.value.slice(index); // 更新确认密码值
      conPasswordInputs.value[index - 1].focus();
    }
  }

  // 处理输入时限制长度
  if (input.value.length >= maxLength) {
    if (event.key !== "Backspace" && index < 3) {
      event.preventDefault(); // 阻止默认输入行为
      conPasswordInputs.value[index + 1].focus();
    }
  }

  // 实时更新确认密码值
  if (event.key !== "Backspace") {
    conInputValues.value[index] = input.value; // 更新当前输入框值
    conPswValue.value = conInputValues.value.join(""); // 更新整体确认密码值
  }
};

const withdrawValid = () => {
  if (withdrawalMethod.value == "" || withdrawAmount.value == "") {
    ElNotification({
      position: "top-left",
      zIndex: 1004,
      title: "Error",
      message: "Checks that the value of each item of the form is not null",
      type: "error"
    });
    return;
  } else {
    nextStep("0-3");
  }
};
const previewData = ref(null);
//提现预览
const withdrawSubmit = async () => {
  let data = {
    ticket: ticket.value,
    bank_card_id: withdrawalMethod.value + "",
    amount: withdrawAmount.value
  };
  let res = await withdrawPreview(data);

  // console.log(res);
  if (res.errno == 0) {
    previewData.value = res.data.info;
    withdrawal_token.value = res.data.withdrawal_once_token;
    nextStep("2-1-1");
    // cleardata();
  }
  // Handle the form submission
};
const withdrawal_token = ref(null);
//提现提交
const withdrawVerify = async () => {
  let data = {
    withdrawal_once_token: withdrawal_token.value
  };
  let res = await withdrawPost(data);
  if (res.errno == 0) {
    ElNotification({
      position: "top-left",
      zIndex: 1004,
      title: "Success",
      message: "withdraw succeeded",
      type: "success"
    });
    // getWallet();

    cleardata();
    showTab.value = true;
    layerStep.value = "2-1";
  }
  // console.log(res);
};
const unbandCard = value => {
  // dialogTitle.value = `${value.bank_name}`;
  // dialog.value = true;
  showConfirmDialog({
    title: globalProperties.$t("layer.wallet.unbundling"),
    message: value.bank_name,
    confirmButtonText: globalProperties.$t("layer.wallet.confirm"),
    cancelButtonText: globalProperties.$t("layer.wallet.cancel")
  })
    .then(async () => {
      bank_card_id.value = value.bank_card_id;
      nextStep("0-4");
      // let data = {
      //   bank_card_id: value.bank_card_id
      // };
      // // on confirm
      // let res = await removeBankcard(data);
      // console.log(res);
      // if (res.errno == 0) {
      //   cleardata();
      //   ElNotification({
      //     position: "top-left",
      //     zIndex: 1004,
      //     title: "Success",
      //     message: "unbind succeeded",
      //     type: "success"
      //   });
      // }
    })
    .catch(() => {
      // on cancel
    });
};
const props = defineProps(["walletShow"]);
const emit = defineEmits(["walletClose"]);
const closeWallet = () => {
  if (main.user_detail.payment_password_set == 0) {
    console.log("用户未设置... 关闭");
    layerStep.value = "2-2";
    activeTab.value = "tab2";
    showTab.value = false;
    validType.value = "0-1";
    cleardata();
    emit("walletClose");
    return;
  }
  layerStep.value = "1-2";
  activeTab.value = "tab1";
  cleardata();
  title.value = globalProperties.$t("layer.wallet.wallet");
  showTab.value = main.user.rechargStatus;
  emit("walletClose");
};
const layerConfig = ref({});
const choseType = (obj1, obj2) => {
  console.log(obj1, obj2);
  channelObj.value = obj1;
  sceneObj.value = obj2;
};
const offlineBankInfo = ref(null);
const choseOfflineBank = v => {
  offlineBankInfo.value = v;
  nextStep("1-3-3");
};
const channelObj = ref(null);
const sceneObj = ref(null);
const item_code = ref(null);
const bankAccountList = ref([]);
const getConfig = async () => {
  return;
  let res = await paymentInit();
  if (res.errno == 0) {
    console.log("==================", res.data);
    layerConfig.value = res.data;
    if (
      res.data &&
      res.data.deposit_online_channel_list &&
      res.data.deposit_online_channel_list.length
    ) {
      res.data.deposit_online_channel_list.forEach(item => {
        if (item.reward.type == "static") {
          item.showText =
            globalProperties.$t("layer.wallet.ActivityOffer") +
            ": " +
            item.reward.data.value +
            globalProperties.$t("layer.register.gold");
        } else if (item.reward.type == "none") {
          // item.showText =
          //   globalProperties.$t("layer.wallet.ActivityOffer") +
          //   ": " +
          //   item.reward.data.value +
          //   "%";
          item.showText = "";
        } else {
          item.showText =
            globalProperties.$t("layer.wallet.ActivityOffer") +
            ": " +
            item.reward.data.value +
            "%";
        }
      });
    }
    console.log(" layerConfig.value.///.showText***--", layerConfig.value);
    if (
      layerConfig.value.deposit_offline_bank_reward &&
      layerConfig.value.deposit_offline_bank_reward.type == "static"
    ) {
      layerConfig.value.deposit_offline_bank_reward.showText =
        globalProperties.$t("layer.wallet.ActivityOffer") +
        ": " +
        layerConfig.value.deposit_offline_bank_reward.data.value +
        globalProperties.$t("layer.register.gold");
    } else if (
      layerConfig.value.deposit_offline_bank_reward &&
      layerConfig.value.deposit_offline_bank_reward.type == "rate"
    ) {
      layerConfig.value.deposit_offline_bank_reward.showText =
        globalProperties.$t("layer.wallet.ActivityOffer") +
        ": " +
        layerConfig.value.deposit_offline_bank_reward.data.value +
        "%";
    } else {
      // layerConfig.value.deposit_offline_bank_reward.showText =
      //   globalProperties.$t("layer.wallet.ActivityOffer") +
      //   ": " +
      //   layerConfig.value.deposit_offline_bank_reward.data.value +
      //   "%";
      layerConfig.value.deposit_offline_bank_reward.showText = "";
    }
    console.log(
      "layerConfig.deposit_o/*****************/////////ffline_bank_reward.showText",
      layerConfig.value
    );
    cleardata();
  }
};
//线上充值
const subOnlineRecharge = async () => {
  let min = Number(sceneObj.value.once_min_limit);
  let max = Number(sceneObj.value.once_max_limit);
  if (amount.value >= min && amount.value <= max) {
    console.log("通过校验");
  } else {
    console.log("未通过");
    ElNotification({
      position: "top-left",
      zIndex: 1004,
      title: "Error",
      message: globalProperties.$t("layer.wallet.rechargelimit"),
      type: "error"
    });
    return false;
  }
  let data = {
    channel_id: channelObj.value.channel_id,
    scene: sceneObj.value.scene_code,
    amount: amount.value
  };
  if (item_code.value != null && sceneObj.value.child_item) {
    data.item_code = item_code.value;
  }
  // console.log(data);
  let res = await onlineDeposit(data);
  // console.log(res);
  if (res.errno == 0) {
    if (res.data.type == "jump_page") {
      window.open(res.data.info.url, "_blank");
    }
    cleardata();
    ElNotification({
      position: "top-left",
      zIndex: 1004,
      title: "Success",
      message: "recharge succeeded",
      type: "success"
    });
    layerStep.value = "1-2";
    showTab.value = true;
  }
  getWallet();
};
const is_participate_active = ref("1");
const remark = ref("");
const bank_card_id = ref("");
//线下充值
const subOfflineRecharge = async () => {
  let data = {
    bank_card_id: bank_card_id.value,
    amount: amount.value,
    remark: remark.value,
    is_participate_active: is_participate_active.value
  };
  let res = await offlineDeposit(data);
  if (res.errno == 0) {
    cleardata();
    ElNotification({
      position: "top-left",
      zIndex: 1004,
      title: "Success",
      message: "Order submitted successfully",
      type: "success"
    });
    layerStep.value = "1-2";
    showTab.value = true;
    // getWallet();
  }

  // console.log(res);
};
const fileList = ref([]);
// 获取余额
const getWallet = async () => {
  return;
  let res = await getBalance();
  if (res.errno == 0 && res.data.balance) {
    // console.log(res.data.balance);
    // main2.balance = res.data.balance;
    // console.log(main2.balance);
  }
};
//获取自己银行卡列表
const getBankcardList = async () => {
  return;
  let res = await bankcardList();
  console.log(res.data);

  if (res.data.list && res.data.list.length != 0) {
    res.data.list.forEach(item => {
      item.bank_card_number = item.bank_card_number.slice(-4);
    });
  }
  bankAccountList.value = res.data.list;
  // console.log(bankAccountList.value);
};
const unbindCard = async () => {
  // console.log("///");
};
onMounted(async () => {
  if (main.isLogin) {
    // getWallet();
    getConfig();
    getBankcardList();
    if (main.user_detail.payment_password_set == 0) {
      console.log("用户未设置提现密码");
      layerStep.value = "2-2";
      activeTab.value = "tab2";
      showTab.value = false;
      validType.value = "0-1";
      // console.log(validType.value);
    }
  }
});

watch(
  () => main.isLogin,
  () => {
    if (main.isLogin) {
      // getWallet();
      getConfig();
      getBankcardList();
    }
  }
);
watch(
  () => props.walletShow,
  (newVal, oldVal) => {
    console.log("newVal,oldVal", newVal, oldVal, layerStep.value);
    if (main.user_detail.payment_password_set == 0) {
      console.log("用户未设置提现密码");
      layerStep.value = "2-2";
      activeTab.value = "tab2";
      showTab.value = false;
      validType.value = "0-1";
      // console.log(validType.value);
    }

    switch (layerStep.value) {
      case "1-2":
        getConfig();
        break;
    }
  }
);
</script>
<style scoped lang="less">
.van-overlay {
  display: flex;
}

input {
  border: 1px solid #2f4553;
  background-color: #0f212e;
  color: #fff;
  border-radius: 0.25rem;
}

input:hover,
input:focus {
  border-color: #557086;
}

.recharge ::v-deep(.van-cell) {
  border-radius: 8px;
  background-color: #213743;
  color: #fff;
}

.input-style ::v-deep(.van-cell) {
  padding: 0.5rem;
  background-color: #0f212e;
  color: #fff;
}

.input-style ::v-deep(.van-cell .van-field__control) {
  padding-left: 0.5rem;
  color: #fff;
}

::v-deep(.van-cell:after) {
  position: relative;
}

::v-deep(.van-collapse-item__content) {
  background-color: #213743;
}

::v-deep(.van-collapse) {
  border-radius: 8px;
}

::v-deep(.van-cell__value) {
  color: #fff;
}

::v-deep(.el-select__wrapper) {
  background-color: #0f212e;
  color: #fff;
}

::v-deep(.el-select__popper.el-popper) {
  background-color: #0f212e;
  color: #fff;
}

::v-deep(.el-select__placeholder) {
  color: #fff;
}

.sidebar {
  width: 80%;
  background-color: #071824;
  display: flex;
  border-radius: 40px;
  padding: 0.5rem;

  .btn {
    height: 40px;
    border-radius: 40px;
    text-align: center;
    border-left: 2px solid #071824;
  }
}

.active-tab {
  background-color: #2f4553;
}

.collapse-item {
  margin-bottom: 1rem;
  color: #b1bad3;
  font-weight: 400;
  padding: 0.5rem;
  /* // border: 1px dashed #b1bad3; */
  border-radius: 4px;
  background-color: #0f212e;
  cursor: pointer;
}

.preview-cover {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}

.el-radio.is-bordered.is-checked {
  border-color: #b1bad3 !important;
}

::v-deep(.el-radio__input.is-checked .el-radio__inner, .el-radio__inner:after) {
  background: #213743 !important;
  border-color: #b1bad3;
}

::v-deep(.el-radio__input.is-checked + .el-radio__label) {
  color: #b1bad3 !important;
}

.el-radio.is-bordered.el-radio--large {
  border-color: #2f4553;
}

::v-deep(.el-radio__inner) {
  background-color: #213743;
  border-color: #213743;
}
</style>
